<template>
  <div class="home">

    <header class="home-navbar">
      <van-nav-bar
        @click-right="onClickRight"
      >
        <template #left>
          <div>logo</div>
        </template>
        <template #title>
          <router-link to="/search">
            <van-search v-model="searchValue" style="padding: 0;" shape="round" placeholder="请输入搜索关键词" />
          </router-link>  
        </template>
        <template #right>
            <van-icon name="user-circle-o" size="28" color="#000" />
        </template>
      </van-nav-bar>
    </header>
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src=image class="img"/>
      </van-swipe-item>
    </van-swipe>
    </div>
    
    <div class="category-nav">
      <van-grid clickable :column-num="5" :border="false">
        <van-grid-item :icon="require('../../assets/icon/热卖推荐.png')" text="热卖推荐" to=""/>
        <van-grid-item :icon="require('../../assets/icon/我的金豆.png')" text="领金豆" to="" />
        <van-grid-item :icon="require('../../assets/icon/优惠券.png')" text="领券中心" to="" />
        <!-- <van-grid-item :icon="require('../../assets/icon/生活缴费.png')" text="充值缴费" to="" /> -->
        <van-grid-item :icon="require('../../assets/icon/百亿补贴.png')" text="百亿补贴" to="" />
        <van-grid-item :icon="require('../../assets/icon/全部分类.png')" text="全部" to="" />
      </van-grid>
    </div>
    <div class="recommended-products">
      <goods-list></goods-list>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script> 
import NavBar from '@/components/NavBar.vue'
import GoodsList from '@/components/GoodsList.vue'
export default {
  components: { NavBar,GoodsList },
  name: 'HomeView',
  data(){
    return {
      searchValue: "",
      images: [
        require('../../assets/banner1.jpg'),
        require('../../assets/banner2.jpg'),
        require('../../assets/banner3.jpg'),
        require('../../assets/banner4.jpg'),

      ]
    }
  },
  methods: {
    onClickRight() {
      this.$router.push({path: '/my'})
    }
  }
}
</script>

<style lang="scss" scoped>
  .home {
    .home-navbar {
      margin-bottom: 2px;
      
      :deep() .van-nav-bar__title {
        margin-left: 50px;
        width: 72%;
        max-width: 80%;
        margin-right: 50px;
      }
    }
    .category-nav {
      padding-bottom: 8px;
    }
    
    .img{
      width: 100%;
    }
  }

</style>